<template>
  <div class="card-container">
    <!-- 修改个人信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-form-item label="头　像" >
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="{ Authorization: token }"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓　名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="签　名">
          <el-input v-model="form.signature" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="介　绍">
          <el-input v-model="form.introduce" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">立即修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 修改个人信息结束 -->
    <!-- 修改密码 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>
      <div class="text item">
        <el-form
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="100px"
        >
          <el-form-item label="当 前 密 码" prop="currentPwd">
            <el-input
              type="password"
              v-model="form.currentPwd"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新　密　码" prop="newPwd">
            <el-input
              type="password"
              v-model="form.newPwd"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确 认 密 码" prop="confirmPwd">
            <el-input
              type="password"
              v-model="form.confirmPwd"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePwd('form')"
              >立即修改</el-button
            >
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 修改密码结束 -->
  </div>
</template>

<script>
import { update, updatePwd, getInfo } from "@/api/user";
import md5 from "js-md5";
import { mapGetters } from "vuex";


export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6) {
        callback(new Error("密码长度不能少于6位"));
      } else if (value.length > 18) {
        callback(new Error("密码太长啦~"));
      } else {
        if (this.form.confirmPwd !== "") {
          this.$refs.form.validateField("confirmPwd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("当前密码不能为空"));
      } else {
        callback();
      }
    };
    return {
      form: {
        currentPwd: "",
        confirmPwd: "",
        newPwd: "",
      },
      rules: {
        newPwd: [{ validator: validatePass, trigger: "blur" }],
        confirmPwd: [{ validator: validatePass2, trigger: "blur" }],
        currentPwd: [{ validator: validatePass3, trigger: "blur" }],
      },
      // 封面地址
      imageUrl: "",
      // 文件上传地址
      uploadUrl: process.env.VUE_APP_UPLOAD_URL,
    };
  },
  created() {
    this.getInfo();
  },
  computed: {
    ...mapGetters(["token"]),
  },
  methods: {
    // 当前用户信息
    getInfo() {
      getInfo().then((res) => {
        this.form = res.data;
        this.imageUrl = this.form.header
      });
    },
    // 修改个人信息
    update() {
      this.form.header = this.imageUrl;
      update(this.form).then((res) => {
        this.$message.success(res.msg);
        this.getInfo();
      });
    },
    // 修改密码
    updatePwd(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const temp = { ...this.form };
          temp.newPwd = md5(temp.newPwd);
          temp.currentPwd = md5(temp.currentPwd);
          updatePwd(temp).then((res) => {
            this.$message.success(res.msg);
            this.getInfo();
          });
        } else {
          return false;
        }
      });
    },
    // 重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },
     //  限制用户上传的图片格式和大小
    beforeAvatarUpload(file) {
      const isPng = file.type === "image/png";
      const isJPG = file.type === "image/jpeg";
      const isBpm = file.type === "image/bmp";
      const isGif = file.type === "image/gif";

      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!(isJPG || isPng || isBpm || isGif)) {
        this.$message.error("上传头像图片只能是 JPG/Png/Bpm/Gif 格式!");
      }

      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      if (isPng) {
        return isPng && isLt10M;
      } else if (isJPG) {
        return isJPG && isLt10M;
      } else if (isBpm) {
        return isBpm && isLt10M;
      } else if (isGif) {
        return isGif && isLt10M;
      }
    },
    // 回显图片地址
    handleAvatarSuccess(res) {
      this.imageUrl = res.data.path;
    },
  },
};
</script>

<style>
.card-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box-card {
  width: 49.5%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
</style>